<template>
  <div class="k-work-box">
    <div class="k-title">
      <img class="k-title-bg" :src="tbg" alt="" srcset="" />
      <div class="k-title-text">工作清单</div>
    </div>
    <div class="k-work-table">
      <div class="k-des">
        <div class="k-des-item">
          <div class="k-item-title" style="color: #c33bda">
            {{ PageData.leaderWork.meetingList.length }}
          </div>
          <div style="color: #fff">林长会议</div>
        </div>
        <div class="k-des-item">
          <div class="k-item-title" style="color: #fed419">
            {{ PageData.leaderWork.leaderOrderList.length }}
          </div>
          <div style="color: #fff">林长令</div>
        </div>
        <div class="k-des-item">
          <div class="k-item-title" style="color: #00a5fd">
            {{ PageData.leaderWork.patrolList.length }}
          </div>
          <div style="color: #fff">巡林调研</div>
        </div>
      </div>
      <div id="main-map" class="k-work-map"></div>
    </div>
    <div class="k-job-box">
      <div style="color: #22ffab">工作职责</div>
      <div style="margin-top: 8px; height: 48px" class="k-des-box">
        <span class="k-span" :line-clamp="2"> {{ PageData.keyWork }}</span>
        <div class="k-work-des">
          <div class="k-title">
            <div>工作职责</div>
          </div>
          {{ PageData.keyWork }}
          <div class="k-t-l"></div>
          <div class="k-t-r"></div>
          <div class="k-b-l"></div>
          <div class="k-b-r"></div>
          <div class="k-t-l-cur"></div>
        </div>
      </div>
    </div>
    <div class="k-job-box" style="margin-top: 12px">
      <div style="color: #22ffab">重点工作</div>
      <div style="margin-top: 8px; height: 48px" class="k-des-box">
        <span class="k-span" :line-clamp="2">
          {{ PageData.responsibility }}</span
        >
        <div class="k-work-des">
          <div class="k-title">
            <div>重点工作</div>
          </div>
          {{ PageData.responsibility }}
          <div class="k-t-l"></div>
          <div class="k-t-r"></div>
          <div class="k-b-l"></div>
          <div class="k-b-r"></div>
          <div class="k-t-l-cur"></div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script lang="ts" setup>
import { onMounted } from "vue";
import { CaretBackOutline, CaretForward } from "@vicons/ionicons5";
import tbg from "../../assets/images/tbg.svg";
import bg01 from "../../assets/images/bg01.svg";
import { NCarousel, NEllipsis, NIcon, NGrid, NGi } from "naive-ui";
import * as echarts from "echarts";
import {
  handleSelect,
  optionsList,
  currectData,
  PageData,
} from "../../composables/useMapView";
let option;

option = {
  color: "#277341",
  tooltip: {
    trigger: "axis",
  },
  radar: [
    {
      indicator: [
        { text: "林长会议", max: 100 },
        { text: "巡林督查", max: 100 },
        { text: "林长令", max: 100 },
      ],
      radius: 60,
      center: ["55%", "60%"],
    },
  ],
  series: [
    {
      type: "radar",
      radarIndex: 0,
      areaStyle: {},
      data: [
        {
          value: [75, 80, 90],
          name: "s",
        },
      ],
    },
  ],
};

onMounted(() => {
  var chartDom = document.getElementById("main-map");
  var myChart = echarts.init(chartDom);

  option && myChart.setOption(option);
});
const workData = {
  LZConference: 256,
  fChiefCmd: 256,
  fPatrolRes: 403,
  jobDuties:
    "这里是供电工作内容这里是供电工作内容这里是供电工工作内容这里是供电工作内容这里是供电工工作内容这里是供电工作内容这里是供电工作内容这里是供电工作内容这里是供电工作内容",
  keyWorkItems:
    "这里是供电工作内容这里是供电工作内容这里是供电工作内容这里是供电工作内容这里是供电工作内容",
};
</script>
  
<style scoped lang="scss">
.k-work-box {
  position: relative;
  width: 380px;
  height: 46%;
  .k-title {
    position: relative;
    top: 12px;
    left: 12px;
    width: 378px;
    height: 36px;
    margin-bottom: 10px;

    .k-title-text {
      position: absolute;
      top: 6px;
      left: 11px;
      font-size: 16px;
      color: #fff;
      font-family: "HYk2gj";
      font-weight: bold;
    }
  }

  .k-work-table {
    position: relative;
    top: 12px;
    left: 12px;
    width: 100%;
    height: 160px;
    display: flex;
    .k-des {
      position: relative;
      display: flex;
      width: 40%;
      height: 100%;
      flex-wrap: wrap;
      .k-des-item {
        position: relative;
        width: 50%;
        height: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .k-item-title {
          font-size: 28px;
          font-weight: 800;
          height: 36px;
        }
      }
    }

    .k-work-map {
      position: relative;
      width: 60%;
      height: 100%;
      z-index: 23;
      padding: 0px;
    }
  }
  .k-job-box {
    position: relative;
    top: 12px;
    left: 12px;
    width: 377px;
    height: 80px;
    background: radial-gradient(
      60% 47% at 43% 50%,
      rgba(57, 215, 155, 0) 0%,
      #39d79aa2 100%
    );
    padding: 10px;
    .k-span {
      -webkit-line-clamp: 2;
      display: -webkit-inline-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .k-des-box {
      &:hover {
        .k-work-des {
          display: block;
        }
      }
      .k-work-des {
        position: absolute;
        left: 410px;
        top: -45px;
        height: 200px;
        width: 400px;
        backdrop-filter: blur(5px);
        background-color: #21261dad;
        border: 1px solid #39d79b;
        padding: 10px;
        display: none;
        .k-title {
          position: relative;
          top: -2px;
          left: 4px;
          width: 378px;
          height: 15px;
          margin-bottom: 10px;
          font-size: 16px;
          color: #1de398;

          .k-title-text {
            position: absolute;
            top: 6px;
            left: 11px;
            font-size: 16px;
            color: #fff;
            font-family: "HYk2gj";
            font-weight: bold;
          }
        }

        .k-t-l {
          position: absolute;
          width: 20px;
          height: 20px;
          border-top: 4px solid #39d79b;
          border-left: 4px solid #39d79b;
          top: -4px;
          left: -4px;
        }

        .k-t-l-cur {
          position: absolute;
          width: 14px;
          height: 14px;
          border-top: 1px solid #39d79b;
          border-left: 1px solid #39d79b;
          transform: rotate(-45deg);
          transform-origin: center;
          top: 88px;
          left: -8px;
          background-color: #2a302a;
        }
        .k-t-r {
          position: absolute;
          width: 20px;
          height: 20px;
          border-top: 4px solid #39d79b;
          border-right: 4px solid #39d79b;
          top: -4px;
          right: -4px;
        }
        .k-b-l {
          position: absolute;
          width: 20px;
          height: 20px;
          border-left: 4px solid #39d79b;
          border-bottom: 4px solid #39d79b;
          left: -4px;
          bottom: -4px;
        }
        .k-b-r {
          position: absolute;
          width: 20px;
          height: 20px;
          border-right: 4px solid #39d79b;
          border-bottom: 4px solid #39d79b;
          right: -4px;
          bottom: -4px;
        }
      }
    }
  }
}
</style>
  